Designing with Color for Inclusive and Effective Data Visualization

A Guide to Color Science, Human Perception, and Accessibility

Part 1: The Science of Color and Human Perception

What is Color, Really?

The word “color” means different things in different fields:

  • A lamp maker thinks of color as the physical light a bulb produces.

  • An artist might think of it as a pigment or paint.

  • A psychologist thinks of it as the sensation we experience.

  • A physicist defines color as specific wavelengths of light within the visible spectrum that humans can see.

Because of these different perspectives, it’s helpful to make a clear distinction:

  • Color Stimulus: This is the physical source—like the light from a lamp or the wavelengths reflected by a paint. It’s the objective, measurable part.

  • Color Sensation (or Perception): This is the color you actually see. It’s the personal experience created when your eyes and brain process the color stimulus.

Putting it all together:

In physics, color is defined by wavelengths of light in the visible spectrum (roughly between 400 and 700 nanometers). The human eye perceives these wavelengths as different colors. For example, 400 nm wavelengths appear as a dull violet, and 700 nm as a dull red.

Materials like pigments, inks, and paints are what we use to create a color stimulus, but they themselves are not “color.” They work by absorbing some wavelengths of light and reflecting others, which then become the stimulus for our color sensation.

The Mechanics of Human Vision

  • Brief overview of how our eyes and brain process light to create color sensation
  • Light of various wavelengths hits the eye’s lens, which focuses the light onto the light-sensitive cells in the back of the eye (the retina)
  • There are 3 main kinds of light-sensitive cells, but in this context we are most interested in cones, which are the cells responsible for daylight and color vision
    • The other main kinds are rods, which help with night vision and ganglion cells, which help the eye adjust the amount of light that enters the eye, among other things
  • Typically, humans have 3 kinds of cones that respond most to different wavelengths:
    • S cones are most sensitive to shorter wavelengths, M cones to medium wavelengths, and L cones to long wavelengths.
  • The home of the light sensitive cells, the retina, connects to a part of the brain called the thalamus brain via the optic nerve
  • The thalamus processes the information from both eyes and sends it to the visual cortex
  • This is where the sensation of color actually begins! The visual cortex starts by processing lightness/darkness contrast, finding edges and fine details. Then, later stages separately process the color hue and chroma of the image
  • This image is then sent to the prefrontal cortex, which processes that information along with other information, like emotions and memories. This all helps us to not only see but to understand what we are seeing and make sense of objects, movement, depth perception, light and color.

Colorimetry: The Science of Quantifying Color

Colorimetry is the science of measuring color and using math to describe how we perceive it. It’s the foundation for all our modern color technology, from color TV to the screens on our smartphones and computers.

This entire field is based on a standard color model created in 1931, known as the CIE color space.

A color space is a specific system for defining and naming colors. Think of it like a recipe that uses numbers to describe a color precisely.

Different color spaces are made for different purposes:

  • For Screens and Print: Color spaces like RGB (for TVs, computers, and phones) and CMYK (for printers) are based on how these devices create color by mixing light or ink.

  • For Human Vision: Some color spaces are designed to match how our eyes actually see color.

  • For Specific Tasks: Others are created to be useful for particular jobs, like photo editing or scientific work.

The associated graphic is a map of human color vision. The full, kidney-shaped area shows every color a typical human eye can see based on the CIE color space.

Graph displaying the range of typical human color vision with shapes overlaid showing the colors that can be represented in sRGB and CMYK color spaces.

.

Three circles (one blue, one green, and one red) on a black background overlap as if a venn diagram where 2 circles overlap to make cyan, yellow, and magenta, and then shows white where all three overlap.

The triangle inside shows the range of colors a standard computer monitor can display (sRGB). This is an example of additive color mixing, where adding one set of wavelengths to another to create a new color.

Three circles (one cyan, one magenta, and one yellow) on a white background overlap as if a venn diagram where 2 circles overlap to make red, green, and blue, and then shows black where all three overlap.

The pentagon shaped shows the range of colors available via CMYK printing, which is a form of subtractive color mixing. Instead of adding light, it creates color by removing or absorbing certain wavelengths of light. Think about mixing paints or inks. Each paint absorbs specific colors of light and when you mix two paints, they absorb more light together. You only see the color that both paints reflect back. In other words, mixing subtracts or “deletes” wavelengths of light before they reach your eye.

Part 2: The Diversity of Human Color Perception

The Magic of Perspective: Colors as We See Them

What we see is shaped by a combination of factors, including:

  • Contrast and Focus: How our eyes distinguish objects and read text.

  • Individual Variation: Our unique biological makeup, including the types of color-sensitive cells (cones) in our eyes.

  • Cognitive Load: The mental effort required to interpret a visual. Complex or confusing visuals create high cognitive load, making them difficult for everyone, especially people with cognitive disabilities.

Our perception of color is not a single, universal experience. It varies greatly from person to person based on biology, age, and culture. Effective design doesn’t assume a “normal” viewer; instead, it anticipates and plans for this human diversity from the very beginning.

Biological Diversity in Vision

Vision differences are common and exist on a spectrum. Designing for this diversity is a core principle of accessibility.

  • Color Vision Deficiency (CVD) means a person has trouble distinguishing between certain colors. It is often called “color blindness,” but true color blindness (seeing only in black and white) is very rare. Most people with CVD see colors, but differently.

    • The most common types affect how people see reds and greens. They are caused when one type of color-sensitive cell in the eye (called a cone) doesn’t work properly or is missing.

      • Protan-type (L cone deficiency) Red appears dimmer and can be hard to tell apart from green.

      • Deutan-type (M cone deficiency): This is the most common type. It’s hard to tell reds and greens apart, but colors don’t look dimmer.

      • Tritan-type (S cone deficiency): This is very rare. It causes confusion between blue and yellow.

  • Vision changes throughout our lives. Key factors that affect legibility include:

    • Contrast Sensitivity: This is how well we can detect the difference between an object and its background. It is different from color perception. As we age, or for those with low vision, reduced contrast sensitivity can make light gray text on a white background very hard to read.

    • Visual Acuity: This is the sharpness of our focus. “20/20 vision” is a standard measure, but it is not perfect vision. Many people have vision that is less sharp, making small, thin text difficult to read.

Cultural & Psychological Considerations

Cultural Symbolism and Connotations:

Color is a powerful communication tool, but its meaning is deeply shaped by culture and context. Using it effectively requires us to think beyond our own assumptions. The meaning of a color is not universal; it is deeply shaped by culture, history, and tradition. The same color can have completely different connotations in different parts of the world.

  • While most fully developed languages have words for the same eleven basic colors (white, black, red, green, yellow, blue, brown, grey, orange, purple, pink), the symbolic meanings attached to them can vary dramatically.

    • Examples of Cultural Color Symbolism:

      • White: In Western cultures, it often symbolizes purity and weddings. In many Eastern cultures, it is the color of mourning and funerals.
      • Red: In China, it is a lucky color associated with prosperity and celebration. In South Africa, it is a color of mourning.
      • Purple: In ancient Rome, Tyrian purple dye was so rare and expensive that it became the color of emperors and senators. This association with royalty and status continues in many parts of the world today.

    • Avoiding Stereotypes:

      • It is crucial to move away from stereotypical color associations, such as using pink for girls and blue for boys in gender data visualizations. These choices can mislead readers and reinforce harmful biases. Instead, choose colors based on the data’s context or to deliberately challenge conventions.

    • Key Takeaway: When choosing colors for a global audience, it is crucial to research their cultural meanings to ensure your message is interpreted correctly and respectfully.

Emotional and Pre-attentive Responses:
  • Color has a powerful, often instantaneous, effect on our emotions and where we focus our attention. This happens both through learned cultural associations and through innate, pre-attentive processing (how our brain interprets visual information before we are even consciously aware of it). While personal experience plays a role, studies suggest some emotional links to color are widely shared. Common associations include:
    • Red: Energy, passion, danger, excitement
    • Blue: Calm, trust, stability, peace
    • Yellow: Happiness, optimism, warmth
    • Green: Growth, nature, relaxation, wealth

Using Color in Design:

  • Guiding Attention: High-contrast, saturated colors can make key data “pop” and direct the viewer’s focus pre-attentively (before they even consciously think about it).

  • Evoking Meaning: While personal experiences vary, some color-emotion links (e.g., red for urgency, blue for calm) are widely shared and can be used to support your narrative.

  • Reducing Cognitive Load: A strategic color hierarchy helps viewers understand what is most important without unnecessary mental effort.

CautionA Note on ‘Color Psychology’

It’s important to distinguish between observed trends and unproven theories. While evidence shows color affects mood and attention, systems that claim to diagnose personality types based on color preferences (like some outdated models from Carl Jung) are not scientifically supported.

Part 3: Color and Digital Accessibility

WCAG’s Color & Contrast Criteria: The “Old” Standard

To make digital content accessible, the Web Content Accessibility Guidelines (WCAG) set a baseline for color contrast. These guidelines ensure that text stands out enough from its background for people to read it.

AA and AAA Compliance Levels:

  • Level AA is the standard minimum requirement for most organizations. It ensures accessibility for a wide range of users.

  • Level AAA is a higher, more stringent level of contrast, recommended for critical text and larger audiences.

In short: WCAG 2 provides a simple, widely-used set of rules (like a 4.5:1 contrast ratio for normal text) that is the current legal and industry baseline.

The Emergence of APCA (Accessible Perceptual Contrast Algorithm)

APCA is a modern, more sophisticated method for calculating contrast that is being developed as the future standard (for WCAG 3). It recognizes that human perception of contrast is more complex than simple color ratios.

Key Advantages of APCA:

  • Context-Aware: It considers the text’s font weight, size, and background to determine the required contrast. A small, thin font needs more contrast than a large, bold one.

  • Human-Perception Based: It is directly tuned to how our eyes and brain actually perceive lightness and darkness.

  • Better Predicts Readability: It more accurately predicts what is truly readable, especially for dark mode, light text on colored backgrounds, and other situations where the old WCAG formula falls short.

In short: APCA is a smarter, more accurate tool that ensures readability based on real-world human vision science.

WCAG vs. APCA: A Comparative Analysis

While WCAG 2 is the current enforceable standard, APCA represents the future direction of accessibility.

  • WCAG 2 is a simple, one-size-fits-all rule that is good for basic compliance but can be both too strict in some cases and not strict enough in others.

  • APCA is a flexible, context-sensitive guide that provides better, more practical results for designers and a better experience for users.

The industry direction is moving toward adopting APCA, but for now, many organizations must still follow WCAG 2 for legal compliance.

Other Critical Guidelines:

Good color contrast is essential, but it’s only one part of digital accessibility.

  • Don’t Use Color Alone: Never rely solely on color to convey information. For example, in a chart, use a pattern or an icon in addition to color. If a form field is missing information, don’t just make the label red; also add an icon or text message.

  • Provide Text Alternatives: Any information that is presented only in color (like a color-coded map) must have a text alternative. This ensures that users who cannot see the color, including those using screen readers, can still understand the content.

  • Structuring for Screen Readers: Using proper ARIA tags and semantic structure in code is essential for making complex SVG visualizations accessible.

In short: Color is a powerful tool, but it must be paired with other cues to be truly accessible to everyone.

Part 4: Applications in Data Visualization: Synthesizing the Knowledge

Before building a palette, it’s crucial to understand the core principles that make it work.

1. Using Perceptual Color Spaces (CIELAB/LCh) for Uniform Palettes

The Problem with HSL: While easy for computers, HSL (Hue Saturation Lightness) does not match human vision. Colors with the same “Lightness” value (e.g., a blue and a yellow) can have wildly different perceived brightness, creating jarring and unbalanced palettes.

The Solution - CIELAB/LCh: These color models are designed around human perception. Using them ensures that colors meant to have the same perceived lightness actually do. This is the foundation for a professional, harmonious color system.

2. How CVD Impacts Data Interpretation
  • If color is the only way to convey information, your visualization fails for users with Color Vision Deficiency (CVD).
  • Real-world consequence: A line chart where the “profit” and “loss” lines are only distinguishable by a red/green hue will be unreadable to a significant portion of the audience, leading to misinterpreted data and poor decisions.
3. The Three Types of Data Palettes

Choose your palette based on the story your data tells:

  • Qualitative: For categorical data with no inherent order (e.g., product categories, regions). Colors should be distinct but have similar perceived lightness.

  • Sequential: For numeric data that goes from low to high (e.g., temperature, population density). Use a light-to-dark gradient of a single hue or a perceptually uniform multi-hue gradient.

  • Diverging: For data that deviates from a critical midpoint (e.g., profit/loss, deviation from an average). Use two contrasting hues on the ends and a neutral light color in the middle.

4. Applying Modern Contrast Standards (WCAG & APCA)

  • WCAG 2: The current legal baseline. It provides a simple ratio (e.g., 4.5:1 for text) but is flawed, especially for dark backgrounds and colored text.

  • APCA (The Future): A context-aware model that considers font weight, size, and spatial properties. It more accurately predicts actual readability and is essential for modern interfaces like dark mode.

5. Strategic Use of Color for Pre-attentive Processing

  • Use high-contrast, saturated colors to make the most important data points “pop” and guide the viewer’s attention instantly.

  • Use more muted colors with lower contrast for context and background elements. This creates lower cognitive load visual hierarchy without relying solely on on legends.

A Detailed Process for Developing Accessible Data Viz Color Palettes

Follow this step-by-step workflow to build a system that is both beautiful and inherently accessible.

Phase 1: Foundation & Strategy

Step 1: Audit Your Data & Chart Types
  • List the types of visualizations you commonly use (bar charts, line graphs, heat maps, etc.).
  • Identify the types of data you display:
    • How many categories do you typically have?
    • Do you often show “positive/negative” or “deviation from a goal”?
    • This tells you whether you need Qualitative, Sequential, and/or Diverging palettes.
Step 2: Define Palette Requirements
  • Categorical Needs: “We need a qualitative palette with at least 6 distinguishable colors.”
  • Sequential Needs: “We need a sequential palette for metrics from 0-100%.”
  • Diverging Needs: “We need a diverging palette to show performance above/below a target.”
  • Brand Constraints: Identify any non-negotiable brand colors that must be incorporated.

Phase 2: Palette Creation in a Perceptual Space

Step 3: Choose a Perceptual Color Space
  • Tooling: Use a tool that works in LCh or CIELAB, such as Accessible Palette, Chroma.js, or ColorBrewer 2.0.
  • Action: Do not start in HSL. Build your palette in a perceptual space from the beginning.
Step 4: Build the Qualitative Palette First
  1. Select your first hue (often a brand color).
  2. Choose a Lightness (L) and Chroma (C) value that feels balanced.
  3. To generate the next color, move significantly in Hue (e.g., 60-90 degrees) while keeping Lightness and Chroma nearly constant.
  4. Repeat, ensuring all colors have a similar perceived “weight” on the page.
  5. The Grayscale Test: Convert your palette to grayscale.
  6. If the colors become muddled and hard to distinguish, adjust their Lightness values until they are clearly different even without color.
Step 5: Build Sequential & Diverging Palettes
  • Sequential: Start with a very light, desaturated version of your color (high L, low C) for the low end. Progress to a dark, saturated version (low L, high C) for the high end. The steps in between should feel perceptually uniform.
  • Diverging: Start with your “negative” hue (e.g., a cool color like blue) on one end and your “positive” hue (e.g., a warm color like orange) on the other. Meet in the middle with a very light, near-neutral color (e.g., light gray or beige).

Phase 3: Accessibility Validation & Refinement

Step 6: Contrast Checking
  • For Text/Labels: Use the APCA Contrast Calculator to ensure text-on-background and data-label-on-color pairs meet at least a Lc 60 threshold for readability.
  • For Legal Compliance: Also check against WCAG 2.1 AA (4.5:1) if required.
  • Key Check: Verify contrast for both light and dark mode backgrounds.
Step 7: CVD Simulation Testing
  • Tooling: Use Color Oracle, Coblis, or the simulator in your browser’s developer tools.
  • Action: Apply the CVD filters to your entire screen and look at your example charts.
  • Ask: Can I still distinguish all data series? Does the meaning of the sequential/diverging scale remain clear? If not, go back to Step 4 and adjust Lightness and Chroma.
Step 8: Implement Non-Color Redundancy
  • This is a critical step that makes your palette truly robust.
  • Direct Labeling: Plan to place text labels directly on data points instead of relying on a color legend.
  • Patterns & Textures: For filled areas (like stacked bars), have a library of patterns (stripes, dots) to pair with colors.
  • Shapes: In scatter plots, assign a unique shape (circle, square, triangle) to each category in addition to color.

Phase 4: Tooling, Documentation & Integration

Step 9: Codify and Document
  • Create a central document (a “style guide”) that displays all approved palettes with their HEX/RGB values.
  • For each palette, include: > Use Case: “Qualitative Palette A - for general categorical data.” > > Accessibility Notes: “Tested for Deuteranopia and Tritanopia. Passes grayscale test.” > > Contrast Ratings: “Do not use #ABC123 for text smaller than 16px.”
Step 10: Integrate into Workflow & Tools
  • Design Tools: Add the palettes to your Figma, Sketch, or Adobe XD libraries.
  • Code: Export the colors as CSS variables (e.g., --color-data-category-1: #123abc;) or into a design token system.
  • Templates: Create chart templates in Excel, Google Sheets, or your BI tool (like Sigma or Tableau) that use the accessible palettes by default.

By following this process, you move from ad-hoc, potentially problematic color choices to a systematic, reliable, and inclusive color system that ensures your data’s story is clear to everyone.

Appendix

Terms and Definitions

  • Additive Color Mixing: Creating colors by adding different wavelengths of light together (used in screens).
  • APCA (Accessible Perceptual Contrast Algorithm): A modern method for calculating color contrast that considers human perception factors like font size and weight.
  • CIELAB/LCh: Color spaces designed around human perception that ensure colors have consistent perceived lightness.
  • Cognitive Load: The mental effort required to understand information.
  • Colorimetry: The science and technology of quantifying and describing color and how we perceive it.
  • Color Sensation/Perception: The personal experience of color that our brain creates when processing color stimuli.
  • Color space: A specific system for defining and naming colors. Think of it like a recipe that uses numbers to describe a color precisely.
  • Color Stimulus: The physical source of color - measurable light waves or reflected wavelengths that enter our eyes.
  • Color Vision Deficiency (CVD): A condition where people have difficulty distinguishing between certain colors, often called “color blindness.”
  • Cones: Light-sensitive cells in the retina responsible for color vision in daylight conditions.
  • Contrast Sensitivity: How well we can detect differences between an object and its background.
  • Diverging Palette: Colors that use two contrasting hues on the ends with a neutral middle, used for data that deviates from a midpoint.
  • HSL (Hue, Saturation, Lightness): A color model that computers use but doesn’t match human color perception well.
  • Pre-attentive Processing: How our brain processes visual information before we’re consciously aware of it.
  • Qualitative Palette: Colors used for categorical data that has no inherent order.
  • Retina: The light-sensitive layer at the back of the eye that contains cells for detecting light and color.
  • Sequential Palette: A color gradient from light to dark used for numeric data that goes from low to high values.
  • Subtractive Color Mixing: Creating colors by removing or absorbing certain wavelengths of light (used in printing).
  • Visual Acuity: The sharpness or clarity of vision.
  • Visual Cortex: The part of the brain that processes visual information and creates our sensation of color.
  • Wavelengths: The physical measurement of light that determines what color we see, measured in nanometers (nm).
  • WCAG (Web Content Accessibility Guidelines): International standards for making web content accessible to people with disabilities.

Resources

Tools

Additional Reading

Reference Materials